<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户页面</title>
    <link rel="stylesheet" href="./css/huame.css" />
  </head>
  <body>
    <!-- 用户信息和快捷入口 -->
    <section class="user-info">
      <div class="user-avatar">
        <img id="user-avatar" src="" alt="用户头像" />
      </div>
      <div class="user-login" style="margin-top: 10px">
        <span id="login-status">登录查看个人主页</span>
        <p id="login-btn">立即登录</p>
      </div>
      <div class="quick-actions">
        <div>美志</div>
        <div>收藏</div>
        <div>草稿箱</div>
        <div>消息</div>
      </div>
    </section>

    <!-- 登录弹窗 -->
    <div id="login-modal" class="login-modal">
      <div class="login-modal-content">
        <h2>登录</h2>
        <label for="username">用户名:</label>
        <input type="text" id="username" placeholder="请输入用户名" />
        <label for="password">密码:</label>
        <input type="password" id="password" placeholder="请输入密码" />
        <button id="submit-login">确定</button>
        <button id="close-modal">取消</button>
      </div>
    </div>

    <!-- VIP 功能模块 -->
    <section class="vip-section">
      <div class="vip-banner">
        <p>美国秀秀 💖 粉钻VIP</p>
        <button>特惠包月</button>
      </div>
      <p>精品会员功能、海量会员素材、去广告特权...</p>
    </section>

    <!-- 我的专属 -->
    <section class="my-services" style="margin-bottom: 50px">
      <h2>我的专属</h2>
      <div class="service-icons" id="service-container">
        <!-- 本地 json 渲染 -->
        <!-- <div>素材中心</div>
        <div>配方</div>
        <div>免费试用</div>
        <div>证件照</div>
        <div>帮我修图</div>
        <div>1元领取</div>
        <div>帮我设计</div>
        <div>美图相册</div> -->
      </div>
    </section>

    <!-- 底部导航 -->
    <footer class="bottom-nav">
      <div><a href="./index.html">首页</a></div>
      <div><a href="./tuku.html">图库</a></div>
      <div><a href="#">AI修图</a></div>
      <div><a href="#">设计室</a></div>

      <div class="bootom-active"><a style="color: #e650b3" href="./me.html">我</a></div>
    </footer>
  </body>
  <script src="./js/me.js"></script>
</html>
